<template lang="">
<div>
  <div class="comm-main" ref="comMain" v-if="commList.length > 0">
  <div class="comm" v-for="obj in commList" :key="obj.com_id">
    <div class="comm_header">
        <img :src="obj.aut_photo" alt="">
        <span class="comm_name">{{obj.aut_name}}</span>
        <div class="comm_love" v-if="obj.is_liking === false" @click="commLoveFn(true,obj)">
            <van-icon name="like-o" color="#ff0000" size="0.47333333333333335rem" />
        </div>
        <div class="comm_love" v-else  @click="commLoveFn(false,obj)">
            <van-icon name="like" color="#ff0000" size="0.47333333333333335rem"/>
        </div>
    </div>
    <div class="comm_content">
      {{obj.content}}
    </div>
    <div class="comm_time">{{timeAgo(obj.pubdate)}}</div>
    <van-divider />
  </div>
  </div>
  <div class="comm-empty" v-else>还没有评论，快来评论吧</div>
</div>

</template>
<script>
import { timeAgo } from '@/utils/date'
export default {
  data () {
    return {
      commList: []
    }
  },
  created () {
    this.getCommList()
    this.$bus.$on('getNewComm', (obj) => {
      console.log(1)
      this.commList.unshift(obj)
      this.scrollTopFn()
    })
  },
  methods: {
    async getCommList () {
      const res = await this.$API.reqCommentsList({ id: this.$route.query.id })
      console.log(res)
      if (res.status === 200) {
        this.commList = res.data.data.results
        this.$emit('getTotalCount', res.data.data.total_count)
      }
    },
    scrollTopFn () {
      const comm = this.$refs.comMain
      comm.scrollTo(0, 0)
    },
    timeAgo: timeAgo,
    commLoveFn (isLove, obj) {
      this.commList.forEach((item) => {
        if (item.com_id === obj.com_id) {
          item.is_liking = isLove
        }
      })
    }
  },
  beforeDestroy () {
    this.$bus.$off(['getNewComm'])
  }
}
</script>
<style lang="less" scoped>
.comm-main{
  max-height: 300px;
  padding-bottom: 30px;
  overflow: scroll;
.comm{
    margin:20px 10px 6px 6px;
    // height: 00px;
.comm_header{
    position: relative;
    img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    }
    .comm_name{
        position:absolute;
        left: 65px;
        top:18px;
        font-size: 14px;
    }
    .comm_love{
        position:absolute;
        right: 10px;
        top:15px;
    }
}
.comm_content{
   font-size: 18px;
}
.comm_time{
margin-top:5px;
font-size: 14px;
color:#ccc;
}
}
}
.comm-empty{
  height: 50px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: #ccc;
}
</style>
